<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>资质审查</title>
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./element/index.css">

</head>

<body>
    <div id="app" v-cloak>
        <div class="cardBox">
            <div class="carTop">
                <div class="lInfo">
                    <img src="../img/timg.png" alt="">
                    <div>
                        {{userName||'啊哈哈'}}
                        <span>{{userTel||'15904440357'}}</span>
                    </div>
                </div>
                <div>
                    <el-button @click="editHandle" size="small">编辑信息</el-button>
                    <el-button @click="outHandle" size="small">退出登录</el-button>
                </div>
            </div>
        </div>
        <el-card>
            <!-- {{window.pageUrl}} -->
            <template v-if="window.pageUrl==''">
                <el-button size="small" @click="addHandle" style="margin: 8px 0px;">创建记录</el-button>
                <el-table :data="list" style="width: 100%" border style="width: 100%;" height="80vh"
                    :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
                    <el-table-column prop="recordName" label="记录名称">
                    </el-table-column>
                    <el-table-column prop="remark" label="记录备注">
                    </el-table-column>
                    <el-table-column prop="uploadTime" label="创建时间" width="180">
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button size="small" @click="toInfo(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="codeBox">
                    <img src="../img/erWeima.jpg" alt="">
                    <span>关注公众号</span>
                    <span>掌握最新进度</span>
                </div>
            </template>
            <div class="iframeBox" v-else>
                <iframe :src="window.pageUrl" frameborder="0" style="width: 100%;height: 100%;"></iframe>
            </div>
        </el-card>






        <!-- 创建弹窗 -->

        <el-dialog title="创建记录" :visible.sync="jiluDia" width="50%" :before-close="jiLUClose">
            <el-form :model="jiluForm" :rules="jiluFormRule" ref="jiluForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="记录标题" prop="recordName">
                    <el-input v-model="jiluForm.recordName" placeholder="请输入记录标题"></el-input>
                </el-form-item>
                <el-form-item label="记录简介" prop="note">
                    <el-input v-model="jiluForm.note" placeholder="请输入记录简介"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="jiLUClose">取 消</el-button>
                <el-button type="primary" @click="jiluSubmit">确 定</el-button>
            </span>
        </el-dialog>






        <!-- 完善用户信息 -->
        <el-dialog title="完善信息" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="infoDia"
            width="50%" :before-close="infoDiaClose">
            <el-form :model="user" :rules="infoFormRule" ref="infoForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="userName">
                    <el-input v-model="user.userName" placeholder="请输入您的姓名"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="userTel">
                    <el-input v-model="user.userTel" placeholder="为方便后续沟通，请输入您的电话"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="infoDiaClose">取 消</el-button>
                <el-button type="primary" @click="infoSubmit">确 定</el-button>
            </span>
        </el-dialog>


        <!-- <div class="save">
            <van-button type="primary" @click="addHandle" size="small">创建记录</van-button>
        </div> -->

        <div class="mask" v-if="mask">
            <img src="../../img/load.gif">
        </div>
    </div>


    <script src="../../js/vue.min.js"></script>
    <script src="../../js/flex_ible/lib-flexible.js"></script>
    <script src="../../js/vue-lazyload.js"></script>
    <script src="../../js/vant.min.js"></script>
    <script src="./element/element.js"></script>
    <script src="../../js/vue-lazyload.js"></script>
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/ajax.js"></script>
    <script src="../js/url.js" type="text/javascript" charset="utf-8"></script>

    <script>

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        var code = GetQueryString("code");
        // alert(code)
        window.pageUrl = ''


        Vue.use(VueLazyload);
        var vm = new Vue({
            el: "#app",
            data: {
                mask: false,
                list: [],
                note: '',
                recordName: '',
                userId: localStorage.recordUserId || 0,
                userName: '',// 用户名
                userTel: '',// 电话
                showUserDia: false,
                user: {   //用户数据
                    userName: '',
                    userTel: '',
                },
                pageUrl: '', // 跳转到哪个页面
                jiluDia: false,// 添加记录弹窗

                jiluForm: {
                    recordName: "",
                    note: "",
                },
                jiluFormRule: {
                    recordName: [
                        { required: true, message: '请输入记录标题', trigger: 'blur' },
                    ],
                },
                infoFormRule: {
                    userName: [
                        { required: true, message: '请输入您的姓名', trigger: 'blur' },
                    ],
                    userTel: [
                        { required: true, message: '为方便后续沟通，请输入您的电话', trigger: 'blur' },
                    ],
                },

                infoDia: false,


            },
            created() {
                // if (localStorage.recordUser) {
                //     this.user = JSON.parse(localStorage.recordUser)
                //     this.userId = this.user.userId
                //     this.userName = this.user.userName
                //     this.userTel = this.user.telNum
                //     this.getData()
                // }
                this.getUserData()
                // this.userId = 1
                // localStorage.recordUserId = 1
                // this.getData()

                console.log(this.user);
                console.log(window);


            },
            methods: {

                // 退出登录
                outHandle() {
                    this.$confirm('确定退出登录吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        localStorage.removeItem('recordUser')
                        localStorage.removeItem('recordUserId')
                        window.location.href = 'login.html'
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消退出'
                        });
                    });
                },
                // 提交信息
                infoSubmit() {
                    this.$refs.infoForm.validate((valid) => {
                        if (!valid) return
                        if (!this.validator(this.user.userTel)) {
                            this.$message.warning('请输入正确的电话号码')
                            return
                        }
                        console.log(this.user);

                        var that = this;
                        that.mask = true
                        ajax({
                            url: newUrl + "qual/editQualUser",
                            type: 'post',
                            data: {
                                userName: that.user.userName,
                                telNum: that.user.userTel,
                                userId: that.user.userId,
                                openId: that.user.openId,
                            },
                            dataType: 'json',
                            timeout: 10000,
                            contentType: "application/json",
                            success: function (res) {
                                var res = JSON.parse(res)
                                console.log(res);
                                that.mask = false
                                if (res.flag) {
                                    localStorage.recordUser = JSON.stringify(that.user)
                                    localStorage.recordUserId = that.user.userId
                                    that.getData()
                                    that.infoDiaClose()
                                } else {
                                    that.$message.warning('保存失败，请重试')
                                }
                            },
                        })


                    })
                },
                // 用户信息关闭
                infoDiaClose() {
                    this.infoDia = false
                },
                // 保存记录
                jiluSubmit() {
                    this.$refs.jiluForm.validate((valid) => {
                        if (!valid) return

                        console.log(this.jiluForm);

                        var that = this;
                        that.mask = true
                        ajax({
                            url: newUrl + "qual/addAndEditQualRecord",
                            type: 'post',
                            data: {
                                recordName: that.jiluForm.recordName,
                                userId: that.userId,
                                remark: that.jiluForm.note,
                                uploadTime: that.getTime()
                            },
                            dataType: 'json',
                            timeout: 10000,
                            contentType: "application/json",
                            success: function (res) {
                                var res = JSON.parse(res)
                                console.log(res);
                                that.mask = false
                                if (res.flag) {
                                    that.getData()
                                    that.jiLUClose()
                                    that.$message({
                                        message: '保存成功',
                                        type: 'success'
                                    })
                                } else {
                                    that.$$message.warning('保存失败，请重试')
                                }
                            },
                        })

                    });


                },
                // 添加记录弹窗关闭
                jiLUClose() {
                    this.$refs.jiluForm.resetFields();
                    this.jiluDia = false
                },
                toPage(url) {
                    this.pageUrl = url
                },
                getUserData: function () {
                    console.log(code);
                    var that = this;
                    that.mask = true
                    ajax({
                        url: newUrl + "qual/login",
                        type: 'post',
                        data: {
                            code: code,
                            flag: 1
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            // alert(res)
                            var res = JSON.parse(res)
                            if (res.flag) {
                                that.mask = false
                                if (res.data == null) {
                                    that.$message.warning('获取信息失败，请退出重试')
                                    localStorage.removeItem('recordUser')
                                    localStorage.removeItem('recordUserId')
                                    window.location.href = 'login.html'
                                    return
                                } else {
                                    that.user = res.data

                                    localStorage.recordUserId = that.user.userId
                                    if (that.user.userName == null) {
                                        that.infoDia = true
                                    } else {
                                        localStorage.recordUser = JSON.stringify(that.user)
                                        that.userId = that.user.userId
                                        that.userName = that.user.userName
                                        that.userTel = that.user.telNum
                                        that.getData()
                                    }

                                }

                            } else {
                                that.$message.warning('获取信息失败，请退出重试')
                                localStorage.removeItem('recordUser')
                                localStorage.removeItem('recordUserId')
                                window.location.href = 'login.html'
                            }
                        },
                    })
                },

                editHandle() {
                    this.infoDia = true
                },
                validator(val) {
                    // 验证手机号 和座机号
                    return /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(val) || /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/.test(val);
                },

                getTime() {
                    var stamp = new Date().getTime() + 8 * 60 * 60 * 1000;
                    return new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
                },
                // 创建记录
                addHandle() { this.jiluDia = true },
                toInfo(obj) {
                    localStorage.recordId = obj.recordId
                    window.pageUrl = './step.html'

                    console.log(window);
                    this.$forceUpdate()

                },
                getData() {
                    var that = this;
                    // this.mask = true
                    ajax({
                        url: newUrl + "qual/QualRecordList",
                        type: 'post',
                        data: {
                            userId: that.userId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.list = res.data.reverse()
                                console.log(res.data);
                                that.mask = false
                            }
                        },
                    })
                },


            }
        })


        window.addEventListener('message', e => {
            console.log(e);
            window.pageUrl = e.data
            vm.$forceUpdate()

            // if (e.origin === 'http://b.index.com') {
            //     console.log(e.origin) //子页面URL，这里是http://b.index.com
            //     console.log(e.source) // 子页面window对象，全等于iframe.contentWindow
            //     console.log(e.data) //子页面发送的消息
            // }
        }, false)

    </script>

</body>

</html>